<template>
	<view class="container">
		
		<view class="image-box">
			<view class="h4">
				更改头像
			</view>
				<view class="image" @click="upload">
					<image :src="img" mode=""></image>
				</view>
		
		<view class="user">
				<view class="usertext">
					新用户名
				</view>
				<view class="userinput">
					<input type="text" value="" v-model="user" />
				</view>
		</view>
			<view class="btn"><u-button type="success" @click="readyimg">确定</u-button></view>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			img:this.$store.state.userInfo.avatar,
			showimg:'',
			user:''//用户名
		
		};
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title: '信息重置'
		});
	},
	methods: {
		upload() {
			let that=this
			uni.chooseImage({
				//uniapp API里面的媒体里面的图片上传
				count: 1, //默认9  (数量)
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success(res) {
					that.img=res.tempFilePaths[0]
					that.showimg=res.tempFilePaths[0]
				}
			});
		},
		readyimg(){
			if(this.showimg==''){
			uni.showToast({
				title: '请选择更改图片',
				icon: 'none',
				duration: 2000
			});
			}else{
				let that=this
				const fs = uni.getFileSystemManager() //获取文件系统管理对象 （微信小程序里的API里面文件下面的 FileSystemManager.readFile(Object object)）
				fs.readFile({
				  filePath: this.showimg,  //返回回来的图片
				  encoding: 'base64', //转换的格式
				  success(res) {
					let base64='data:image/jpeg;base64,'+res.data//拼接
					// console.log(that.API.update)
					that.$post(that.API.update,{filePath:base64,nickname:that.user}).then(res=>{
						uni.showToast({
							title: '成功',
							icon: 'success',
							duration: 2000
						});
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},2000)
						// that.$store.state.userInfo.avatar
					})
				  },
				  fail(res) {
				    console.error(res)
				  }
				})
			}
		}
		
	}
};
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
	height: 100vh;
	
	.image-box{
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 60vw;
		text-align: center;
		.h4{
			margin-bottom: 20rpx;
		}
		.image{
			margin: 20rpx 0;
			margin: 0 auto;
			border-radius: 50%;
			overflow: hidden;
			height: 150rpx;
			width: 150rpx;
			image{
				width: 150rpx;
				height: 150rpx;
				
			}
		}
		.btn{
			margin-top: 30rpx;
		}
	}
	.user{
		margin-top: 30rpx;
		display: flex;
		.userinput{
			margin-left: 20rpx;
			border-bottom: 1px solid #007AFF;
		}
	}
		
	
}
</style>
